<!DOCTYPE html>
<html>
<head>
<title>Ultrasound Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: #fff;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="850" height="450"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // --- Helper Function to draw an arrow ---
  function drawArrow(ctx, fromx, fromy, tox, toy) {
    const headlen = 10;
    const dx = tox - fromx;
    const dy = toy - fromy;
    const angle = Math.atan2(dy, dx);
    ctx.beginPath();
    ctx.moveTo(fromx, fromy);
    ctx.lineTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(tox, toy);
    ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    ctx.stroke();
  }

  // --- Main Drawing ---
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // --- Define Geometry and Style Constants ---
  const fatX = 270;
  const fatWidth = 80;
  const muscleX = fatX + fatWidth;
  const muscleWidth = 200;
  const blockTopY = 100;
  const blockHeight = 220;
  const blockBottomY = blockTopY + blockHeight;

  // 1. Draw Incident Beam
  ctx.save();
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 2;
  const arrowStartX = 40;
  const arrowEndX = fatX - 10;
  drawArrow(ctx, arrowStartX, 150, arrowEndX, 150);
  drawArrow(ctx, arrowStartX, 210, arrowEndX, 210);
  drawArrow(ctx, arrowStartX, 270, arrowEndX, 270);

  ctx.fillStyle = '#000';
  ctx.font = '22px Arial';
  ctx.textAlign = 'left';
  ctx.textBaseline = 'middle';
  ctx.fillText('beam', arrowStartX, 185);
  ctx.fillText('of ultrasound', arrowStartX, 215);
  ctx.restore();

  // 2. Draw Blocks (Fat and Muscle)
  ctx.save();
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1.5;

  // Fat block
  ctx.fillStyle = '#E6E6E6'; // Light grey
  ctx.fillRect(fatX, blockTopY, fatWidth, blockHeight);
  ctx.strokeRect(fatX, blockTopY, fatWidth, blockHeight);

  // Muscle block
  ctx.fillStyle = '#C8C8C8'; // Darker grey
  ctx.fillRect(muscleX, blockTopY, muscleWidth, blockHeight);
  ctx.strokeRect(muscleX, blockTopY, muscleWidth, blockHeight);

  // 3. Draw Block Labels
  ctx.fillStyle = '#000';
  ctx.font = '22px Arial';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'bottom';
  ctx.fillText('fat', fatX + fatWidth / 2, blockTopY - 10);
  ctx.fillText('muscle', muscleX + muscleWidth / 2, blockTopY - 10);
  ctx.restore();

  // 4. Draw Transmitted Beam
  ctx.save();
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 2;
  const transArrowStartX = muscleX + muscleWidth + 10;
  const transArrowEndX = transArrowStartX + 200;
  drawArrow(ctx, transArrowStartX, 150, transArrowEndX, 150);
  drawArrow(ctx, transArrowStartX, 210, transArrowEndX, 210);
  drawArrow(ctx, transArrowStartX, 270, transArrowEndX, 270);
  
  ctx.fillStyle = '#000';
  ctx.font = '22px Arial';
  ctx.textAlign = 'left';
  ctx.textBaseline = 'middle';
  ctx.fillText('transmitted beam', transArrowStartX + 20, 185);
  ctx.fillText('of ultrasound', transArrowStartX + 20, 215);
  ctx.restore();

  // 5. Draw Dimension Lines
  ctx.save();
  const dimLineY = blockBottomY + 35;
  ctx.lineWidth = 1;
  ctx.font = '18px Arial';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'bottom';
  ctx.fillStyle = '#000';

  // --- Fat dimension ---
  const fatDimX1 = fatX;
  const fatDimX2 = muscleX;
  // Dashed lines
  ctx.beginPath();
  ctx.setLineDash([5, 5]);
  ctx.moveTo(fatDimX1, blockBottomY);
  ctx.lineTo(fatDimX1, dimLineY + 10);
  ctx.moveTo(fatDimX2, blockBottomY);
  ctx.lineTo(fatDimX2, dimLineY + 10);
  ctx.stroke();
  ctx.setLineDash([]);
  // Double-headed arrow line
  ctx.beginPath();
  const headSize = 8;
  ctx.moveTo(fatDimX1 + headSize, dimLineY - 4);
  ctx.lineTo(fatDimX1, dimLineY);
  ctx.lineTo(fatDimX1 + headSize, dimLineY + 4);
  ctx.moveTo(fatDimX2 - headSize, dimLineY - 4);
  ctx.lineTo(fatDimX2, dimLineY);
  ctx.lineTo(fatDimX2 - headSize, dimLineY + 4);
  ctx.moveTo(fatDimX1, dimLineY);
  ctx.lineTo(fatDimX2, dimLineY);
  ctx.stroke();
  // Label
  ctx.fillText('0.45 cm', (fatDimX1 + fatDimX2) / 2, dimLineY - 5);

  // --- Muscle dimension ---
  const muscleDimX1 = muscleX;
  const muscleDimX2 = muscleX + muscleWidth;
  // Dashed line (right side only, left is shared)
  ctx.beginPath();
  ctx.setLineDash([5, 5]);
  ctx.moveTo(muscleDimX2, blockBottomY);
  ctx.lineTo(muscleDimX2, dimLineY + 10);
  ctx.stroke();
  ctx.setLineDash([]);
  // Double-headed arrow line
  ctx.beginPath();
  ctx.moveTo(muscleDimX1 + headSize, dimLineY - 4);
  ctx.lineTo(muscleDimX1, dimLineY);
  ctx.lineTo(muscleDimX1 + headSize, dimLineY + 4);
  ctx.moveTo(muscleDimX2 - headSize, dimLineY - 4);
  ctx.lineTo(muscleDimX2, dimLineY);
  ctx.lineTo(muscleDimX2 - headSize, dimLineY + 4);
  ctx.moveTo(muscleDimX1, dimLineY);
  ctx.lineTo(muscleDimX2, dimLineY);
  ctx.stroke();
  // Label
  ctx.fillText('2.1 cm', (muscleDimX1 + muscleDimX2) / 2, dimLineY - 5);

  ctx.restore();

  // 6. Draw Figure Caption
  ctx.save();
  ctx.fillStyle = '#000';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'top';
  
  const captionY = blockBottomY + 80;
  const captionText = "Fig. 5.1 (not to scale)";
  const figText = "Fig. 5.1 ";
  const scaleText = "(not to scale)";

  ctx.font = 'bold 20px Arial';
  const figWidth = ctx.measureText(figText).width;
  ctx.font = '20px Arial';
  const scaleWidth = ctx.measureText(scaleText).width;
  const totalWidth = figWidth + scaleWidth;
  const startX = (canvas.width - totalWidth) / 2;
  
  ctx.font = 'bold 20px Arial';
  ctx.fillText(figText, startX + figWidth/2, captionY);
  ctx.font = '20px Arial';
  ctx.fillText(scaleText, startX + figWidth + scaleWidth/2, captionY);
  ctx.restore();

</script>
</body>
</html>